<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link href="../css/test.css" rel="stylesheet">
    <title>修改账单</title>
    <link rel="stylesheet" href="../account/css/account.css" type="text/css" media="screen"/>
</head>
<body>
<div th:replace="common/top"></div>
<section class="content">
    <main>
        <div class="container">
            <article class="message is-success" th:if="${message}">
                <div class="message-header">
                    <p>Success</p>
                </div>
                <div class="message-body">
                    Order modified.
                </div>
            </article>
            <div class="title" th:text="'Edit: '+${order?.orderId}"></div>
            <form action="/order/EditOrder" method="post">
                <section class="section">
                    <div class="title is-4">Payment Details</div>
                    <div class="field">
                        <label class="label">Card Type</label>
                        <div class="control">
                            <input class="input" type="text" name="cardType" th:value="${order?.cardType}">
                        </div>
                    </div>
                    <div class="field">
                        <label class="label">Card Number</label>
                        <div class="control">
                            <input class="input" type="text" name="creditCard" th:value="${order?.creditCard}">
                        </div>
                    </div>
                    <div class="field">
                        <label class="label">Expiry Date (MM/YYYY)</label>
                        <div class="control">
                            <input class="input" type="text" name="expiryDate" th:value="${order?.expiryDate}">
                        </div>
                    </div>
                </section>
                <!--                <article class="panel is-primary">-->
                <!--                    <p class="panel-heading">-->
                <!--                        Billing Address-->
                <!--                    </p>-->
                <!--                    <div class="panel-block">-->
                <!--                       -->
                <!--                    </div>-->
                <!--                </div>-->
                <!--                </article>-->
                <section class="section">
                    <div class="title is-4">Billing Address</div>
                    <div class="field">
                        <label class="label">First name</label>
                        <div class="control">
                            <input class="input" type="text" name="billToFirstName" th:value="${order?.billToFirstName}">
                        </div>
                    </div>
                    <div class="field">
                        <label class="label">Last name</label>
                        <div class="control">
                            <input class="input" type="text" name="billToLastName" th:value="${order?.billToLastName}">
                        </div>
                    </div>
                    <div class="field">
                        <label class="label">Address 1</label>
                        <div class="control">
                            <input class="input" type="text" name="billAddress1" th:value="${order?.billAddress1}">
                        </div>
                    </div>
                    <div class="field">
                        <label class="label">Address 2</label>
                        <div class="control">
                            <input class="input" type="text" name="billAddress2" th:value="${order?.billAddress2}">
                        </div>
                    </div>
                    <div class="field">
                        <label class="label">City</label>
                        <div class="control">
                            <input class="input" type="text" name="billCity" th:value="${order?.billCity}">
                        </div>
                    </div>
                    <div class="field">
                        <label class="label">State</label>
                        <div class="control">
                            <input class="input" type="text" name="billState" th:value="${order?.billState}">
                        </div>
                    </div>
                    <div class="field">
                        <label class="label">Zip</label>
                        <div class="control">
                            <input class="input" type="text" name="billZip" th:value="${order?.billZip}">
                        </div>
                    </div>
                    <div class="field">
                        <label class="label">Country</label>
                        <div class="control">
                            <input class="input" type="text" name="billCountry" th:value="${order?.billCountry}">
                        </div>
                    </div>
                </section>
                <section class="section">
                    <div class="title is-4">Shipping Address</div>
                    <div class="field">
                        <label class="label">First name</label>
                        <div class="control">
                            <input class="input" type="text" name="shipToFirstName" th:value="${order?.shipToFirstName}">
                        </div>
                    </div>
                    <div class="field">
                        <label class="label">Last name</label>
                        <div class="control">
                            <input class="input" type="text" name="shipToLastName" th:value="${order?.shipToLastName}">
                        </div>
                    </div>
                    <div class="field">
                        <label class="label">Address 1</label>
                        <div class="control">
                            <input class="input" type="text" name="shipAddress1" th:value="${order?.shipAddress1}">
                        </div>
                    </div>
                    <div class="field">
                        <label class="label">Address 2</label>
                        <div class="control">
                            <input class="input" type="text" name="shipAddress2" th:value="${order?.shipAddress2}">
                        </div>
                    </div>
                    <div class="field">
                        <label class="label">City</label>
                        <div class="control">
                            <input class="input" type="text" name="shipCity" th:value="${order?.shipCity}">
                        </div>
                    </div>
                    <div class="field">
                        <label class="label">State</label>
                        <div class="control">
                            <input class="input" type="text" name="shipState" th:value="${order?.shipState}">
                        </div>
                    </div>
                    <div class="field">
                        <label class="label">Zip</label>
                        <div class="control">
                            <input class="input" type="text" name="shipZip" th:value="${order?.shipZip}">
                        </div>
                    </div>
                    <div class="field">
                        <label class="label">Country</label>
                        <div class="control">
                            <input class="input" type="text" name="shipCountry" th:value="${order?.shipCountry}">
                        </div>
                    </div>
                    <div class="field">
                        <label class="label">Courier</label>
                        <div class="control">
                            <input class="input" type="text" name="courier" th:value="${order?.courier}">
                        </div>
                    </div>
                    <div class="field"><label class="label">Status</label>
                        <div class="control"><a th:if="${order?.status=='S'}" th:text="已发货">状态</a>
                            <a th:if="${order?.status=='P'}" th:text="未发货">状态</a></div>
                    </div>
                    <div class="control">
                        <button class="button is-primary">Submit</button>
                    </div>
                </section>

            </form>
        </div>

    </main>
</section>

<div th:replace="common/bottom"></div>

</body>
</html>